<template>
    <ynet-content id="operatorQ" :headerInformation="true" :headerMenu="true">
        <div class="main-container"><!--提示当前位置-->
			<ynet-breadcrumb></ynet-breadcrumb>
		</div>
        <div>
            <el-dialog title="Tran Code" :visible.sync="bsnCodeTableVisible" :close-on-click-modal="false" :close-on-press-escape="false">
                <el-tree :props="defaultProps" :data="roleBsnList" node-key="bsnCode" ref="tree"
                show-checkbox 
                check-strictly 
                :default-expand-all="true"
                @check-change="handleSelectChange"
                >
                </el-tree>
                <div class="btnArea mt20 tac">
                    <el-button @click=" getBsnName()">Confirm</el-button>
                </div>
            </el-dialog>
        </div>
        <div class="main-container" v-if="main">
            <div>
                <el-form ref="queryForm" :model="queryForm" class="formEmbedTable mt20" :rules="rules">
                    <table>
                        <caption>Enquiry</caption>
                        <tr>
                            <td>Login Name</td>
                            <td >
                                <el-form-item prop="inputUserNo">
                                    <el-input v-model="queryForm.inputUserNo"></el-input>
                                </el-form-item>
                            </td>	
                            <td>Tran Code</td>
                            <td >
                                <el-form-item prop="inputBsnName"><el-input v-model="queryForm.inputBsnName" @focus="cleanOther()"></el-input></el-form-item>
                                <span class="btnArea">
                                    <el-button @click="queryBsnList()">Search</el-button>
                                </span>
                            </td>					
                        </tr>
                         <tr>
                            <td>Date：</td>
                            <td colspan="3">
                                <el-form-item  prop="startDateObj">
                                <el-date-picker v-model="queryForm.startDateObj" @change="queryForm.startTime=$tools.utils.formatDate(queryForm.startDateObj)" type="date" placeholder="Start time"></el-date-picker>
                                </el-form-item>
                                <span>TO</span>
                                <el-form-item  prop="endDateObj">
                                <el-date-picker v-model="queryForm.endDateObj" @change="queryForm.endTime=$tools.utils.formatDate(queryForm.endDateObj)" type="date" placeholder="End Time"></el-date-picker>
                                </el-form-item>               
                            </td>
                        </tr>	
                    </table>
                </el-form>
            </div>
            <div class="btnArea mt20 tac">
                <el-button type="primary" @click="query()">Search</el-button>
            </div>
            <div class="tableForm mt20  tableData printArea fourForm" >
                <el-table :data="operLogList" border>
                    <el-table-column label="Department No." prop="branchNo" align="center"></el-table-column>
                    <el-table-column label="Operator No." prop="userNo" align="center"></el-table-column>
                    <el-table-column label="Operator Name" prop="userAlias" align="center"></el-table-column>
                    <el-table-column label="Transaction Date" prop="createTime" align="center">
                        <template scope="scope">
                            {{ $tools.utils.formatDate(scope.row.createTime,{"symbol":"YYYY-MM-DD HH:mm"}) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="Tran Code" prop="bsnCode" align="center" ></el-table-column>
                    <el-table-column label="Transaction Name" prop="bsnName" align="center" ></el-table-column>
                    <el-table-column label="Result" prop="result" align="center" >
                        <template scope="scope">
                            {{$tools.dict.actionStatus(scope.row.result)}}
                        </template>
                    </el-table-column>
                    <!--
                    <el-table-column label="Remark" prop="jsonStr" align="center"></el-table-column>
                    -->
                </el-table>
            </div>
            <div class="pagination tar mt20">
                <el-pagination  @current-change="handleCurrentChange" :current-page="Number(queryForm.currentPage)" :page-size="Number(queryForm.turnPageShowNum)" layout="total, prev, pager, next, jumper" :total="Number(turnPageTotalNum)">
                </el-pagination>
            </div>
            <div class="btnArea mt20 tac">
                <el-button type="primary" @click="$tools.print()">Print</el-button>
                <el-button type="primary" @click="DownExcel()">DownLoad</el-button>
            </div>
        </div>
        <!--授权确认页面弹窗-->
        <div>
            <ynet-authDialog ref="dialogTable"  @getAuthForm="getAuthForm"></ynet-authDialog>
        </div>
        
        
    </ynet-content>
</template>

<script>
    //import AccLimitAdd from './components/accLimitAdd';
	export default {
		name:'operatorQ',
		components:{
          //AccLimitAdd,
		},
		data(){
            return { 
                main:true,turnPageTotalNum:'',bsnCodeTableVisible:false,
                operLogList:[],//从后台查询到的白名单集合
                rules:{
                    inputBranchNo:[
                        {trigger:'blur',message:'required',required:true},
                        {trigger:'blur',validator:this.$tools.validator.isEngNum},
                    ],
                    startDateObj: [
                        {trigger: 'blur', validator:this.$tools.validator.dateCompare,compareList:['startDateObj','endDateObj'],vm:this,formName:'queryForm'}
                    ],
                    endDateObj: [
                        {trigger: 'blur', validator:this.$tools.validator.dateCompare,compareList:['startDateObj','endDateObj'],vm:this,formName:'queryForm'}
                    ],
                },
                needAuth:'',
                authType:'', 
                authForm: { authUserNo: '', password: '',randomField:''},//100004   617100
                queryForm:{
                    inputBsnCode:'',inputUserNo:'',bsnCode:'IM0601',currentPage:'1',turnPageShowNum:'10',inputBsnName:'',
                    startDateObj:'',
                    endDateObj:'',
                    startTime:'',
                    endTime:'',
                },
                roleBsnList:[],
                defaultProps:{
                    children:'childrens',
                    label:'bsnName',
                },
               selectBsn:{},
            }   
        },
		methods:{ 
            cleanOther() {
				let _this = this
				_this.$refs.queryForm.resetFields()
                //this.queryForm.inputUserNo='';
                _this.queryForm.inputBsnCode='';
                //this.imUserList=[];
			},
            getBsnName(){
                this.queryForm.inputBsnCode=this.selectBsn.bsnCode;
                this.queryForm.inputBsnName=this.selectBsn.bsnName;
                this.bsnCodeTableVisible=false;
            },
            handleSelectChange(data,checked){
                console.log("data:"+JSON.stringify(data))
                if(checked){
                    this.$refs.tree.setCheckedKeys([data.bsnCode])
                    this.selectBsn=$.extend(this.selectBsn,data);
                }
                
                
                console.log()
                //坚挺check状态
            },
            queryBsnList(){//查询角色菜单
                this.roleBsnList=this.$tools.storage.get("menu","save");
                this.roleBsnList.splice(0,1);
                this.bsnCodeTableVisible=true;
            },
            handleCurrentChange(val) {//查询分页方法
                this.queryForm.currentPage=val;
                this.queryChange()
            },
            resetForm(formName){
                    this.$refs[formName].resetFields();
            },
            getAuthForm(val){
                    //获取授权数据
                    this.authForm=val;
                    console.log("val:"+JSON.stringify(val))
                    this.delForm=$.extend(this.delForm,this.authForm)
                    this.delAccess()  //自己页面提交给后台的.do方法
            },
            queryAuth(){//查询授权模式
               
                let body={};body.bsnCode="IM0501";body.version="IM0501",
                this.$tools.request(this,"IM010001Action.do",body).then(data=>{
                    if(data.body.errorCode==0){
                        if(data.body.needAuth==0){//无需授权
                            this.delAccess()
                        }else if(data.body.needAuth==1 && data.body.authType==1){
                            this.needAuth=1;
                            this.authType=1;
                            this.$refs["dialogTable"].show()
                                    // this.dialogTableVisible=true;
                        }else if( data.body.needAuth==1 && data.body.authType==2 ){
                             this.needAuth=1;
                            this.authType=2;
                            this.delAccess()
                        }else{
                            this.$alert('Authorization type error', 'Warning', {
                                confirmButtonText: 'Confirm',
                                callback: action => {
                                }
                            });
                        }
                    }else{
                        this.$alert("System Error Try again", 'Warning', {
                            confirmButtonText: 'Confirm',
                            callback: action => {
                            }
                        });
                    }
                })   
			},
           
            queryChange(){
                //this.queryForm.startTime=this.queryForm.startDate;
                //this.queryForm.endTime=this.queryForm.endDate;
                this.$tools.request(this,"IM0601QueryAction.do",this.queryForm).then(data=>{
                   console.log("data:"+JSON.stringify(data))
                   if(data.body.errorCode==0){
                        this.operLogList=data.body.operLogList;
                        this.turnPageTotalNum=data.body.turnPageTotalNum;
                   }else{
                       this.$alert("System Error Try again", "warning",{
                            confirmButtonText: 'Confirm',
                            callback: action => {
                            }
                        })
                   }
               })
            },
            query(){//查询频率控制
                this.queryForm.currentPage=1
                console.log("queryForm:"+JSON.stringify(this.queryForm))
                this.queryChange()
            },
            DownExcel(){
                    //y业务启停表头
                let operLogTitleList=[
                    {flowNo:'flowNo',branchNo:'Depart No.',userNo:'User No.',userAlias:'User Name',createTime:'Operate Time',
                    bsnCode:'Trans Code',bsnName:'Trans Name',result:'Result',jsonStr:'Detail',}
                    
                ];
                //operLogTitleList    bankOpenStopList
                let operLogList=[];
                //this.tableData;

                for (let item of this.operLogList) {
                    operLogList.push({ 
                        'flowNo': item.flowNo,'branchNo':item.branchNo, 'userNo': item.userNo, 'userAlias': item.userAlias,
                        'createTime':this.$tools.utils.formatDate(item.createTime,{"symbol":"YYYY-MM-DD HH:mm:ss"}),
                        'bsnCode':item.bsnCode,'bsnName': item.bsnName,'result':item.result,
                        'jsonStr': item.jsonStr,
                    })
                }
                let body=[]
                body.operLogList=operLogList;
                body.operLogTitleList=operLogTitleList;
                let url="/api/IM0601DownAction.do";
                let form = $("<form></form>").attr("action", url).attr("method", "post")
                form.append($("<input></input>").attr("type", "hidden").attr("name", "bsnCode").attr("value", "IM0601"))
                form.append($("<input></input>").attr("type", "hidden").attr("name", "versionNo").attr("value", "1.0"))
                form.append($("<input></input>").attr("type", "hidden").attr("name", "iCIFID").attr("value", this.$tools.storage.get("user",'save').iCIFID))
                for (let i in operLogTitleList) {
                    form.append($("<input></input>").attr("type", "hidden").attr("name", "operLogTitleList[" + i + '][flowNo]').attr("value", operLogTitleList[i].flowNo))
                    form.append($("<input></input>").attr("type", "hidden").attr("name", "operLogTitleList[" + i + '][branchNo]').attr("value", operLogTitleList[i].branchNo))
                    form.append($("<input></input>").attr("type", "hidden").attr("name", "operLogTitleList[" + i + '][userNo]').attr("value", operLogTitleList[i].userNo))
                    form.append($("<input></input>").attr("type", "hidden").attr("name", "operLogTitleList[" + i + '][userAlias]').attr("value", operLogTitleList[i].userAlias))
                    form.append($("<input></input>").attr("type", "hidden").attr("name", "operLogTitleList[" + i + '][createTime]').attr("value", operLogTitleList[i].createTime))
                    form.append($("<input></input>").attr("type", "hidden").attr("name", "operLogTitleList[" + i + '][bsnCode]').attr("value", operLogTitleList[i].bsnCode))
                    form.append($("<input></input>").attr("type", "hidden").attr("name", "operLogTitleList[" + i + '][bsnName]').attr("value", operLogTitleList[i].bsnName))
                    form.append($("<input></input>").attr("type", "hidden").attr("name", "operLogTitleList[" + i + '][result]').attr("value", operLogTitleList[i].result))
                    form.append($("<input></input>").attr("type", "hidden").attr("name", "operLogTitleList[" + i + '][jsonStr]').attr("value", operLogTitleList[i].jsonStr))
                    
                }
                for (let i in operLogList) {
                    form.append($("<input></input>").attr("type", "hidden").attr("name", "operLogList[" + i + '][flowNo]').attr("value", operLogList[i].flowNo))
                    form.append($("<input></input>").attr("type", "hidden").attr("name", "operLogList[" + i + '][branchNo]').attr("value", operLogList[i].branchNo))
                    form.append($("<input></input>").attr("type", "hidden").attr("name", "operLogList[" + i + '][userNo]').attr("value", operLogList[i].userNo))
                    form.append($("<input></input>").attr("type", "hidden").attr("name", "operLogList[" + i + '][userAlias]').attr("value", operLogList[i].userAlias))
                    form.append($("<input></input>").attr("type", "hidden").attr("name", "operLogList[" + i + '][createTime]').attr("value", operLogList[i].createTime))
                    form.append($("<input></input>").attr("type", "hidden").attr("name", "operLogList[" + i + '][bsnCode]').attr("value", operLogList[i].bsnCode))
                    form.append($("<input></input>").attr("type", "hidden").attr("name", "operLogList[" + i + '][bsnName]').attr("value", operLogList[i].bsnName))
                    form.append($("<input></input>").attr("type", "hidden").attr("name", "operLogList[" + i + '][result]').attr("value", operLogList[i].result))
                    form.append($("<input></input>").attr("type", "hidden").attr("name", "operLogList[" + i + '][jsonStr]').attr("value", operLogList[i].jsonStr))
                   
                }
                
                form.appendTo("body").submit().remove()
            },
            
		},

	}
</script>
<style>

    @media print{
        .fourForm{zoom:60%;}
    }
    
    .el-table th>.cell {
        word-break:normal;
    }

    .el-table .cell {
        word-break:normal;
    }
</style>